<!--
 * @Description: 个人信息页面组件
 * @Author: Sun Huijuan
 * @Date: 2024-11-26
 * @LastEditors: Sun Huijuan
 * @LastEditTime: 2024-11-26
 -->
<template>
	<div>
		<div class="_-src-portals-desktop-pages-Account-components-PageTitle-root">
			<div class="_-src-portals-desktop-pages-Account-components-PageTitle-divider"></div>
			<span class="_-src-portals-desktop-pages-Account-components-PageTitle-title">个人信息</span>
		</div>
		<form style="padding-bottom: 60px;">
			<div class="_-src-portals-desktop-pages-Account-components-PageTitle-root">
				<div class="_-src-portals-desktop-pages-Account-components-FormField-label" style="float: left">头像
				</div>
				<div class="_-src-portals-desktop-pages-Account-components-FormField-control">
					<div class="_-src-portals-desktop-pages-Account-pages-Profile-avatar_box">
						<img aria-label="头像" class="_-src-portals-desktop-pages-Account-pages-Profile-avatar_image"
							 alt :src="user.image">
					</div>
				</div>
			</div>
			<div class="_-src-portals-desktop-pages-Account-components-PageTitle-root">
				<div class="_-src-portals-desktop-pages-Account-components-FormField-label" style="float: left">姓名
				</div>
				<div class="_-src-portals-desktop-pages-Account-components-FormField-control">
					<div class="_-src-portals-desktop-pages-Account-fields-PlainField-root">
						{{ user.name }}
					</div>
				</div>
			</div>
			<div class="_-src-portals-desktop-pages-Account-components-PageTitle-root">
				<div class="_-src-portals-desktop-pages-Account-components-FormField-label" style="float: left">昵称
				</div>
				<div class="_-src-portals-desktop-pages-Account-components-FormField-control">
					<div class="_-src-portals-desktop-pages-Account-fields-PlainField-root">
						{{ user.nickName }}
					</div>
				</div>
			</div>
			<div class="_-src-portals-desktop-pages-Account-components-PageTitle-root">
				<div class="_-src-portals-desktop-pages-Account-components-FormField-label" style="float: left">
					联系方式
				</div>
				<div class="_-src-portals-desktop-pages-Account-components-FormField-control">
					<div class="_-src-portals-desktop-pages-Account-fields-PlainField-root">
						{{ user.phone }}
					</div>
				</div>
			</div>
			<div class="_-src-portals-desktop-pages-Account-components-PageTitle-root">
				<div class="_-src-portals-desktop-pages-Account-components-FormField-label" style="float: left">邮箱
				</div>
				<div class="_-src-portals-desktop-pages-Account-components-FormField-control">
					<div class="_-src-portals-desktop-pages-Account-fields-PlainField-root">
						{{ user.email }}
					</div>
				</div>
			</div>
			<div class="_-src-portals-desktop-pages-Account-components-PageTitle-root">
				<div class="_-src-portals-desktop-pages-Account-components-FormField-label" style="float: left">余额
				</div>
				<div class="_-src-portals-desktop-pages-Account-components-FormField-control">
					<div class="_-src-portals-desktop-pages-Account-fields-PlainField-root">
						{{ user.balance }}
					</div>
				</div>
			</div>
			<div style="padding-left: 153px;"></div>
			<div class="_-src-portals-desktop-pages-Account-components-PageTitle-root">
				<div class="section-bar">
					<div class="btn">
						<a href="javascript:void(0);" @click="update()" class="btn-base btn-primary" style="float: left">编辑</a>
						<a href="javascript:void(0);" @click="addBalance()" class="btn-base btn-primary">充值</a>
					</div>
				
				</div>
				
			</div>
		</form>
		<!--		修改个人信息-->
		<el-dialog title="修改个人信息" width="800px" center :visible.sync="dialogVisible">
			<el-form
				:model="user"
				status-icon
				ref="ruleForm"
				class="demo-ruleForm"
			>
				<el-form-item label="用户头像：">
					<el-upload
						class="avatar-uploader"
						action="/api/user/upload"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:headers="headers"
					>
						<img v-if="user.image" :src="user.image" class="avatar"/>
						<i v-else class=" el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item prop="name" label="姓名：">
					<el-input
						prefix-icon="el-icon-user-solid"
						placeholder="请输入姓名"
						v-model="user.name"
						maxlength="20"
						show-word-limit
						size="360px;"
					></el-input>
				</el-form-item>
				<el-form-item prop="nickName" label="昵称：">
					<el-input
						prefix-icon="el-icon-user-solid"
						placeholder="请输入昵称"
						v-model="user.nickName"
						maxlength="20"
						show-word-limit
					></el-input>
				</el-form-item>
				<el-form-item prop="phone" label="联系方式：">
					<el-input
						prefix-icon="el-icon-phone"
						type="text"
						placeholder="请输入联系方式"
						v-model="user.phone"
						maxlength="11"
						show-word-limit
					></el-input>
				</el-form-item>
				<el-form-item prop="email" label="邮箱：">
					<el-input
						prefix-icon="el-icon-printer"
						type="text"
						placeholder="请输入邮箱"
						v-model="user.email"
						maxlength="50"
						show-word-limit
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button size="medium" type="primary" @click="updateUser()" style="width:100%;">保存</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
<!--		充值-->
		<el-dialog title="余额充值" width="800px" center :visible.sync="balanceVisible">
			<el-form
				:model="balance"
				status-icon
				ref="ruleForm"
				class="demo-ruleForm">
				<el-form-item prop="type" label="充值方式：">
<!--					充值方式-->
						<el-radio-group v-model="balance.type">
							<el-radio value="1">微信</el-radio>
							<el-radio value="2">支付宝</el-radio>
							<el-radio value="3">银联</el-radio>
						</el-radio-group>
				</el-form-item>
				<el-form-item prop="balance" label="充值金额：">
					<el-input
						prefix-icon="el-icon-user-solid"
						placeholder="请输入充值金额"
						v-model="balance.amount"
						maxlength="20"
						show-word-limit
						size="360px;"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button size="medium" type="primary" @click="validatePwd(balance.type)" style="width:100%;">充值</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>
<script>
	import {useTokenStore} from "../store/token";
	
	export default {
		data() {
			return {
				user: "",
				balance:{
					type:"",   //充值方式
					amount:"",   //金额
				},
				accountBalance:"",
				dialogVisible: false,  //个人信息 dialog框显示
				balanceVisible: false,  //充值 dialog框显示
				passwordVisible:false,  //输入密码
				imageUrl: '',
				headers:{
					Authorization:  useTokenStore().token
				},
			};
		},
		created() {
			this.getUserDetails();
		},
		methods: {
			// 获取用户个人信息
			getUserDetails() {
				let id = this.$store.getters.getUser.id;
				this.$axios
					.get(`/user/selectById/${id}`, {})
					.then(res => {
						this.user = res.data.data;
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			//获取用户各账户密码及信息
			getUserAccount(){
				let id = this.$store.getters.getUser.id;
				this.$axios
					.get(`/user/selectById/${id}`, {})
					.then(res => {
						this.user = res.data.data;
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			//充值
			addBalance(){
				this.balanceVisible=true;
			},
			//充值密码验证
			validatePwd(type){
				this.passwordVisible=true;
				//获取该用户该账户的密码
			
			},
			//编辑个人信息
			update() {
				this.dialogVisible = true;
				this.getUserDetails();
			},
			updateUser() {
				this.user.id = this.$store.getters.getUser.id
				this.$axios
					.put("/user/updateSelf", this.user)
					.then(res => {
						if (res.data.code === 0) {
							this.notifySucceed(res.data.msg);
							this.dialogVisible = false;
						} else {
							this.notifyError(res.data.msg);
						}
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			handleAvatarSuccess(res, file) {
				this.user.image = URL.createObjectURL(file.raw);
			},
		}
	};
</script>
<style>
	
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	
	.section-bar {
		padding: 20px 48px;
		border-top: 2px solid #f5f5f5;
		overflow: hidden;
	}
	
	.section-bar .btn {
		float: left;
	}
	
	 .btn-base {
		float: left;
		margin-left: 10px;
		width: 200px;
		height: 38px;
		border: 1px solid #b0b0b0;
		font-size: 18px;
		line-height: 38px;
		text-align: center;
		background: #ff6700;
		color: #fff;
	}
	
	.btn-primary {
		float: right;
		width: 200px;
		text-align: center;
		font-size: 18px;
		margin-left: 50px;
		background: #ff6700;
		color: #fff;
	}
	
	._-src-portals-desktop-pages-Account-components-PageTitle-root {
		font-weight: 500;
		line-height: 40px;
		position: relative
	}
	
	[dir] ._-src-portals-desktop-pages-Account-components-PageTitle-root {
		padding: 10px 20px
	}
	
	._-src-portals-desktop-pages-Account-components-PageTitle-divider {
		display: inline-block;
		height: 20px;
		vertical-align: middle
	}
	
	[dir=ltr] ._-src-portals-desktop-pages-Account-components-PageTitle-divider {
		border-left: 4px solid rgba(0, 0, 0, .8);
		margin: 0 6px 0 -10px
	}
	
	._-src-portals-desktop-pages-Account-components-PageTitle-title {
		color: rgba(0, 0, 0, .8);
		display: inline-block;
		font-size: 19px;
		vertical-align: middle
	}
	
	._-src-portals-desktop-pages-Account-components-FormField-control {
		width: 360px;
		display: inline-block;
		background-color: #F8F6EA;
	}
	
	[dir=ltr] ._-src-portals-desktop-pages-Account-components-FormField-control {
		float: left;
		margin-left: 20px
	}
	
	[dir=rtl] ._-src-portals-desktop-pages-Account-components-FormField-control {
		float: right;
		margin-right: 20px
	}
	
	._-src-portals-desktop-pages-Account-components-FormField-label {
		-ms-flex-align: center;
		align-items: center;
		display: -ms-flexbox;
		display: flex;
		height: 60px;
		text-align: right;
		width: 120px
	}
	
	._-src-portals-desktop-pages-Account-pages-Profile-primary_text {
		color: #ff6900
	}
	
	._-src-portals-desktop-pages-Account-fields-PlainField-root {
		color: rgba(0, 0, 0, .8);
		/*color: var(--text-secondary-color);*/
		font-size: 17px;
		line-height: 60px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}
	
	[dir] ._-src-portals-desktop-pages-Account-fields-PlainField-root {
		padding: 0 20px
	}
	
	[dir=ltr] ._-src-portals-desktop-pages-Account-components-FormField-label {
		float: left;
		justify-content: right
	}
	
	[dir=rtl] ._-src-portals-desktop-pages-Account-components-FormField-label {
		float: right;
		justify-content: left
	}
	
	._-src-portals-desktop-pages-Account-pages-Profile-avatar_box {
		height: 60px;
		overflow: hidden;
		width: 60px
	}
	
	[dir] ._-src-portals-desktop-pages-Account-pages-Profile-avatar_box {
		border-radius: 50%
	}
	
	._-src-portals-desktop-pages-Account-pages-Profile-avatar_image {
		height: 60px;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		width: 60px
	}
	
	.mi-button {
		color: #333;
		display: inline-block;
		font-size: 18px;
		font-weight: 400;
		height: 60px;
		line-height: 60px;
		overflow: hidden;
		position: relative;
		text-overflow: ellipsis;
		transition: all .3s cubic-bezier(.645, .045, .355, 1);
		vertical-align: top;
		white-space: nowrap
	}
	
	[dir] .mi-button {
		background: #f9f9f9;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		padding: 0 20px;
		text-align: center
	}
	
	.mi-button:focus {
		outline: 0
	}
	
	.mi-button--primary {
		color: #fff
	}
	
	[dir] .mi-button--primary {
		background-color: #ff6900
	}
	
	.mi-button--primary:active, .mi-button--primary:hover {
		color: #fff
	}
	
	[dir] .mi-button--primary:active, [dir] .mi-button--primary:hover {
		background-color: #ff7e29
	}
	
	.mi-button--disabled {
		opacity: .4
	}
	
	[dir] .mi-button--disabled {
		cursor: default
	}
	
	.mi-button--fullwidth {
		width: 100%
	}
	
	[dir] .mi-button--default.mi-button--autoDark {
		background-color: #f0f0f0
	}
	
	.mi-touch-ripple-root {
		bottom: 0;
		overflow: hidden;
		pointer-events: none;
		position: absolute;
		top: 0;
		z-index: 0
	}
	
	[dir] .mi-touch-ripple-root {
		border-radius: inherit
	}
	
	[dir=ltr] .mi-touch-ripple-root, [dir=rtl] .mi-touch-ripple-root {
		left: 0;
		right: 0
	}
</style>